<template>
<div class="tasks">
  <v-nav :path="path" :title="title"></v-nav>
  

       <!-- 添加 class infinite-scroll 和 data-distance  向下无限滚动可不加infinite-scroll-bottom类，这里加上是为了和下面的向上无限滚动区分-->
       <!-- 加载提示符 -->
          <div class="infinite-scroll-preloader">
              <div class="preloader"></div>
          </div> <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100">
          <div class="list-block">
              <ul class="list-container">
              </ul>
          </div>
        
      </div>     
     
    </div>
</template>

<script>
import $ from 'zepto'
import VNav from '../../components/Nav'
import _global from '../global'

export default {
  route: {
    data ({from, next}) { 
      if (from.path === '/user') {
        this.path = from.path
      }
    }
  },
  ready () {
   let self = this
    if (window.localStorage.getItem('user_id')) {
      self.userId = parseInt(window.localStorage.getItem('user_id'), 0)
    }
  $.init()
   this.getAllClubUser(function(data){
      self.addItems(data)
      self.lastIndex = self.itemsPerLoad
   });

    self.initScroll();
    
  },
  data () {
    return {
      path: '/user/club',
      title: '俱乐部成员列表',
      id: 0,
      userList: [],
      predisabled: '',
      active: 'active',
      nextdisabled: '',
      userId: 0,
      loading :false,  //是否加载
      lastIndex :0,//上次加载
      itemsPerLoad :5, //每次加载条数
      maxItems :500  //最多加载
    }
  },
  computed: {
    length () {
      return this.userList.length
    }
  },
  methods: {
   

  //初始化下拉加载
  initScroll(){

        let self =this;
        $(document).on('infinite', '.infinite-scroll-bottom',function() {

          // 如果正在加载，则退出
          if (self.loading) return;

          // 设置flag
          self.loading = true;
        

          self.getAllClubUser(function(user){
              // 重置加载flag
              self.loading = false;
              if(!user){
                return
              }
              if (self.lastIndex >= self.maxItems) {
                  // 加载完毕，则注销无限加载事件，以防不必要的加载
                  $.detachInfiniteScroll($('.infinite-scroll'));
                  // 删除加载提示符
                  $('.infinite-scroll-preloader').remove();
                  return;
              }
               
              // 添加新条目
              self.addItems(user);
            
              // 更新最后加载的序号
              self.lastIndex = $('.list-container li').length;
              
              //容器发生改变,如果是js滚动，需要刷新滚动
              $.refreshScroller();
          });

      });

  
  },

  //从lastIndex开始 加载number条数据
  addItems(userList){
    let self = this
    
     // 生成新条目的HTML
     var html = '';
    for (var i = 0; i < userList.length; i++) {
           var user = userList[i];
           var test = self.audit;
           html +=  '<div class="card" myid='+user.userid+' >'+
           ' <div class="card-content" myid='+user.userid+' >'+
               ' <div class="list-block media-list" myid='+user.userid+' >'+
                  '  <ul myid='+user.userid+' >'+

                  '<li class="item-content" myid='+user.userid+' >'+
                   '  <div class="item-media" myid='+user.userid+'  >'+
                    '    <img src="'+user.headimg+'" width="60" myid='+user.userid+' >'+
                   '  </div>'+
               '  <div class="item-inner" myid='+user.userid+' >'+
                     '  <div class="item-subtitle" myid='+user.userid+' >俱乐部名称 '+user.club_name+'</div>'+
                   '  <div class="item-subtitle" myid='+user.userid+' >成员名称 '+user.name+'</div>'+
                   '  <div class="item-subtitle" myid='+user.userid+' >成员id '+user.userid+'</div>'+
                   '  <div class="item-subtitle" myid='+user.userid+' >房卡数 '+user.gems+'</div>'+
                    ' <div class="item-subtitle" myid='+user.userid+' >加入时间 '+user.create_time+'</div>'+
                 '  </div>'+
        '  </li>'+
                  
                   ' </ul>'+
               ' </div>'+
          '  </div>'+
      '  </div>';
      }

              // 添加新条目
     $('.infinite-scroll-bottom .list-container').append(html);

     //添加点击事件
     $(".card").click(function(event){
       console.log($(event.target).attr('myid'))
       self.audit($(event.target).attr('myid'));
     })

          
  },
   //选择进行审核
    audit(userId){


  
        let self = this; 
                    var buttons1 = [
                      {
                        text: '成员操作',
                        label: true
                      },
                      
                      {
                        text: '踢出俱乐部',
                        color: 'danger',
                        onClick: function() {
                          self.delteFromClub(userId);
                        }
                      }
                    ];
                    var buttons2 = [
                      {
                        text: '取消',
                        bg: 'danger'
                      }
                    ];
                    var groups = [buttons1, buttons2];
                    $.actions(groups);   
    },


  //审核结果
    delteFromClub(userId){
       

       let self = this

      if (window.localStorage.getItem('user_id')) {
        self.userId = parseInt(window.localStorage.getItem('user_id'), 0)
        self.id = parseInt(window.localStorage.getItem('id'), 0)
      }

       self.club_id = this.$route.params.club_id
       
        this.$http.get(_global.url + '/delteFromClub?id=' + self.id + '&club_id='+self.club_id+'&user_id='+userId).then(function(res) {
        if (typeof res.data === 'string') {
          res.data = JSON.parse(res.data)
        }
        if (res.data.errcode === -999) {
          // this.$router.go('/')
          window.location.href = _global.url + '/wxlogin'
          return
        }
        if(res.data.errcode === 3)
        {

          $.alert('删除失败，俱乐部管理员才能删除成员');
          return
        }
        //提示并重新加载数据
        $.toast("操作成功");
        //self.getApplyList();
        location.reload()
      }, function(res) {
        console.log(res)
      })

    },

    getAllClubUser (callback) {
      let self = this
      if (window.localStorage.getItem('user_id')) {
        self.userId = parseInt(window.localStorage.getItem('user_id'), 0)
        self.id = parseInt(window.localStorage.getItem('id'), 0)
      }
     
      self.club_id = this.$route.params.club_id
      self.p_id = parseInt(this.$route.params.p_id, 0) || 1

      this.$http.get(_global.url + '/getClubUserList?id=' + self.id + '&club_id='+self.club_id+ '&start='+self.lastIndex + '&limit='+self.itemsPerLoad).then(function(res) {
        if (typeof res.data === 'string') {
          res.data = JSON.parse(res.data)
        }
        if (res.data.errcode === -999) {
          // this.$router.go('/')
          window.location.href = _global.url + '/wxlogin'
          return
        }
         
      //  self.userList = res.data.data
   
         callback(res.data.data);
        //console.log(self.applyList)
       
      }, function(res) {
        console.log(res)
      })
    },
    classActive (index) {
      if (index === this.p_id) {
        return 'active'
      }
      return ''
    }
  },
  create () {
    this.getAllClubUser()
  },
  components: {
    VNav
  }
}
</script>

<style>
.tasks {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.tasks-tabs .buttons-tab {
  z-index: 10;
  margin-top:2.2rem;
}

.club {
  margin-top: 2.0rem;

}

club li {
list-style-type:none;
}

li {
list-style-type:none;
}

.list-block ul ul {
    padding-left: 0rem;
}
</style>
